<script setup lang="ts">
import { ref, reactive } from 'vue'

import { ContentWrap } from '@/components/ContentWrap'
// import { Descriptions } from '@/components/Descriptions'
import { LeeSee } from '@/components/Lee/See'
// import { ucIpOwnerSeeApi } from '@/api/cy/Guanxi'
// import dayjs from 'dayjs'
import { useCache } from '@/hooks/web/useCache'
import { sysCompetitionSignupSee } from '@/api/competition/index'
// import ColtList from './coltList.vue'
const { wsCache } = useCache()

/****************************** 变量 start ******************************/
const dict: any = wsCache.get('dict')
const data = ref<any>({})
const schema = reactive<any[]>([
  {
    field: 'signup_id',
    label: '主键'
  },
  {
    field: 'type',
    label: '类型',
    component: 'Dict',
    componentProps: {
      options: dict.competition_signup_type
    }
  },
  {
    field: 'name',
    label: '队长名称'
  },

  {
    field: 'sex',
    label: '性别',
    component: 'Dict',
    componentProps: {
      options: dict.user_sex
    }
  },
  {
    field: 'mobile',
    label: '手机号码'
  },
  {
    field: 'email',
    label: '电子邮箱'
  },
  {
    field: 'is_works',
    label: '是否上传作品',
    component: 'Dict',
    componentProps: {
      options: dict.is
    }
  },
  {
    field: 'id_type',
    label: '证件类型',
    component: 'Dict',
    componentProps: {
      options: dict.competition_signup_id_type
    }
  },

  {
    field: 'create_time',
    label: '创建时间'
  }
])

/****************************** 变量 end ******************************/

/****************************** 组件参数 start ******************************/
// 获取参数
const props = defineProps({
  currentRow: {
    type: Object,
    default: () => null
  }
})
/****************************** 组件参数 end ******************************/
const signupId = ref(null)
const teamshow = ref(false)
const schemaWorks = reactive<any[]>([
  {
    field: 'works_id',
    label: '主键'
  },
  {
    field: 'title',
    label: '作品名称'
  },
  {
    field: 'note',
    label: '作品描述',
    span: 3
  },
  {
    field: 'create_time',
    label: '创建时间'
  },
  {
    field: 'thumbnail',
    label: '作品缩略图',
    component: 'Image',
    span: 3
  },
  {
    field: 'show_image',
    label: '作品展示图',
    component: 'Image',
    span: 3
  }
])
const dataWorks = ref<any>({})
const isWorks = ref(false)
// 调用查看接口获取信息
const getQuarantineOrderSee = async () => {
  console.log('props.currentRow', props.currentRow)
  signupId.value = props.currentRow.signup_id
  // data.value = props.currentRow.signup_id
  // data.value.birth_date = getBirthDate(data.value.birth_date)
  if (props.currentRow.signup_id) {
    const res = await sysCompetitionSignupSee({ signup_id: props.currentRow.signup_id })
      .catch(() => {})
      .finally(() => {})
    if (res) {
      data.value = res.data
      teamshow.value = true
      if (res.data.type == '2') {
        schema.push({
          field: 'school_name',
          label: '学校名称'
        })
      }
      if (res.data.id_type == '1') {
        schema.push({
          field: 'id_card_front',
          label: '身份证正面',
          component: 'Image',
          span: 3
        })
        schema.push({
          field: 'id_card_back',
          label: '身份证反面',
          component: 'Image',
          span: 3
        })
        schema.push({
          field: 'id_card_code',
          label: '身份证号码'
        })
      } else if (res.data.id_type == '2') {
        schema.push({
          field: 'passport_image',
          label: '护照图片',
          component: 'Image',
          span: 3
        })
        schema.push({
          field: 'passport_code',
          label: '护照号码'
        })
      } else {
        schema.push({
          field: 'team_name',
          label: '团队名称'
        })
      }
      if (res.data.is_works == '1') {
        dataWorks.value = res.data.works
        isWorks.value = true
      }
    }
  }
}
// const getBirthDate = (date) => {
//   if (date) {
//     return dayjs(date).format('YYYY-MM-DD')
//   }
//   return ''
// }
function downloadFileFromUrl(url, fileName) {
  const link = document.createElement('a') // 创建 <a> 元素
  link.href = url // 设置文件地址
  link.download = fileName // 设置文件名（
  link.click() // 触发点击，自动下载
}
/****************************** 函数方法 end ******************************/

/****************************** 初始化 start ******************************/
const init = async () => {
  // 调用查看接口查询数据
  await getQuarantineOrderSee()
}
init()
/****************************** 初始化 end ******************************/
</script>

<template>
  <ContentWrap>
    <LeeSee :schema="schema" :data="data" />
    <div v-if="data.signup_team && data.signup_team.length > 0">
      <el-table :data="data.signup_team" border style="width: 100%">
        <el-table-column prop="name" label="队员名称" />
        <el-table-column prop="mobile" label="队员手机号" />
      </el-table>
    </div>
  </ContentWrap>
  <ContentWrap v-if="isWorks">
    <LeeSee :schema="schemaWorks" :data="dataWorks" />
    <el-table :data="dataWorks.works_file" border style="width: 100%">
      <el-table-column prop="file_name" label="文件名称" />
      <el-table-column prop="file_type" label="文件类型">
        <template #default="scope">
          <el-tag>{{
            scope.row.file_type == 1 ? '图片' : scope.row.file_type == 2 ? '视频' : '文件'
          }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="file_url" label="文件">
        <template #default="scope">
          <div>
            <div v-if="scope.row.file_type == 1">
              <el-image style="width: 100px; height: 100px" :src="scope.row.file_url" fit="fill" />
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="create_time" label="创建时间" />
      <el-table-column fixed="right" label="操作" min-width="80">
        <template #default="scope">
          <el-button
            type="primary"
            @click.prevent="downloadFileFromUrl(scope.row.file_url, scope.row.file_name)"
          >
            下载
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </ContentWrap>
  <!-- <ContentWrap v-if="data.works">
    <el-table :data="data.works" border style="width: 100%">
      <el-table-column prop="title" label="作品名称" />
      <el-table-column prop="show_image" label="展示图" />
      <el-table-column prop="note" label="注释" />
      <el-table-column prop="create_time" label="创建时间" />
    </el-table>
  </ContentWrap> -->
</template>
